<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TodoList删除功能</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div>
			<input v-model="inputValue"/>
			<button @click="handlerClick">提交</button>
		</div>
		<ul>
			<todo-item 
				v-for="(item,index) of list" 
				:key="index" 
				:content="item"
				:index="index"
				@delete="handlerDelete"
			>
			</todo-item>
 		</ul>
	</div>
	
	<script>
		<!-- 全局组件 -->
		Vue.component('todo-item',{
			// 接收外部来的参数	
			props: ['content','index'],
			template: '<li @click="handlerClick">{{content}}</li>',
			methods: {
				handlerClick : function(){
					alert('cliced : '+ this.content +" ; index : "+this.index)
					this.$emit('delete',this.index)
				}
			}
		})
	
		new Vue({
			el:"#root" ,
			data:{
				inputValue : '',
				list:[]
			},
			methods: {
				handlerClick : function(){
					this.list.push(this.inputValue)
					this.inputValue=''
				},
				handlerDelete: function(index){
					alert(index)
					this.list.splice(index,1)
				}
			}
		})
	</script>
</body>
</html>